<template>
  <div>
<!--      -----------中下側-------邮件信息填写-->
<!--      <mail-enroll></mail-enroll>-->
<!--      <component @exchangesub="exchangesub" :is="this.sub.comName"></component>-->
      <router-view name="msg"></router-view>
<!--      <msg-enroll></msg-enroll>-->
  </div>
</template>

<script>

import MailEnroll from "@/components/enroll/subassembly/person/MailEnroll.vue";
import MsgEnroll from "@/components/enroll/subassembly/person/MsgEnroll.vue";


export default {
    name: "CentEnroll",
    components: {},
    data(){
        return{
            sub:{
                comName:MailEnroll
            },
            pace:0
        }
    },
    methods:{
//过去、现在、未来的颜色变换
        changepast(){
            document.querySelectorAll('.enroll_two')[0]
                .querySelector('span').style="background-position: 0 -200px;" +
                "color: #fff";
            document.querySelectorAll('.enroll_two')[0]
                .querySelector('p').style=" color: #3b4";
        },
        changenew(){
            document.querySelectorAll('.enroll_two')[0]
                .querySelector('span').style="background-position: 0 -200px;" +
                "color: #fff";
            document.querySelectorAll('.enroll_two')[0]
                .querySelector('p').style=" color: #3b4";
        },
        changefut(){
            document.querySelectorAll('.enroll_two')[0]
                .querySelector('span').style="background-position: 0 -200px;" +
                "color: #fff";
            document.querySelectorAll('.enroll_two')[0]
                .querySelector('p').style=" color: #3b4";
        },
//利用 过去、现在、未来的颜色变换来进行变换
        changicon(nowdigit){
            const count=document.querySelectorAll(".enroll_two").length;
            for(var i=0;i<count;i++){
                if (i<nowdigit){
                    this.changepast(i);
                    document.querySelectorAll('.enroll_dots')[0].style='background-position: 0 -100px;'
                    document.querySelectorAll('.enroll_dots')[0].style='background-position: 0 -100px;'
                }else if(i==nowdigit){
                    this.changenew(i);
                    document.querySelectorAll('.enroll_dots')[0].style='background-position: 0 -130px;'
                    document.querySelectorAll('.enroll_dots')[0].style='background-position: 0 -100px;'

                }else if(i>nowdigit){
                    this.changefut(i);
                    document.querySelectorAll('.enroll_dots')[0].style='background-position: 0 -130px;'
                    document.querySelectorAll('.enroll_dots')[0].style='background-position: 0 -130px;'
                }
            }

        },
        exchangesub(msg){
            console.log("通过子组件触发了父组件的方法");
            if (msg=='msg'){
                this.sub.comName=MsgEnroll;
            }
        }

    },
    computed:{

    },
    created() {
        this.changicon();
        
    },
    mounted() {


    },
    watch: {

    },

}
</script>

<style scoped>


</style>